﻿@{
    ViewBag.Title = "Index";
}
@model IEnumerable<GeoBox.Database.GpsPoint>
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
</script>

<div id='mapDiv' style="margin-top: 150px;"></div>

@section scripts{
    <script type="text/javascript">
        var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {
            credentials: "AjG5orvX7HG5m9hT7U0YrJ7p8LM-4UjBvJk_0kNgy7qk84I47Lbs5pEP2Vx0JJhG",
            mapTypeId: Microsoft.Maps.MapTypeId.road
        });

        $(function () {
            var url = '@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "GpsPoint" })';
            $.ajax({
                url: url,
                type: 'GET',
                success: function (result) {
                    map.entities.clear();
                    var pins = new Microsoft.Maps.EntityCollection();
                    var last;
                    $.each(result, function (idx, item) {
                        last = new Microsoft.Maps.Location(item.Latitude, item.Longitude);
                        pins.push(new Microsoft.Maps.Pushpin(last));
                    });
                    map.entities.push(pins);
                    map.setView({ center: last, zoom: 18 });
                }
            });
        });
    </script>
}
